<template>
  <el-card>
    <div slot="header">
      <strong>实验报告</strong>
      <el-row :gutter="24" class="ma_5">
        <el-col :span="7">
          <el-row class="center_x aic">
            <el-col>
              <label>姓名:</label>
            </el-col>
            <el-col>
              <el-input v-model="username"></el-input>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="7">
          <el-row class="center_x aic">
            <el-col>
              <label>实验编码:</label>
            </el-col>
            <el-col>
              <el-input v-model="experimentCode"></el-input>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="6">
          <el-row class="center_x aic">
            <el-col>
              <label>实验名称:</label>
            </el-col>
            <el-col>
              <el-input v-model="experimentName"></el-input>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="4">
          <el-row class="center_x aic">
            <el-col>
              <el-button @click="search()" type="primary">搜索</el-button>
            </el-col>
            <el-col>
              <el-button @click="reset()">重置</el-button>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </div>
    <el-row>
      <el-table :data="source">
        <el-table-column label="姓名" prop="username"></el-table-column>
        <el-table-column label="学校/单位" prop="school"></el-table-column>
        <el-table-column label="实验课程" prop="courseName"></el-table-column>
        <el-table-column label="实验名称" prop="experimentName"></el-table-column>
        <!-- <el-table-column label="创建时间">
          <template slot-scope="scope">{{
            $parseDate(scope.row.createTime)
          }}</template>
        </el-table-column> -->
        <el-table-column label="时长">
          <template slot-scope="scope">{{ scope.row.duration }}分钟</template>
        </el-table-column>
        <el-table-column label="得分">
          <template slot-scope="scope">
            <span>{{ scope.row.totalScore }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150px">
          <template slot-scope="scope">
            <el-row :gutter="24">
              <el-button @click="openReport(scope.row.id)" size="mini" class="option">
                查看报告
              </el-button>
              <!-- <el-button
                @click="openDetail(scope.row.id)"
                size="mini"
                class="option"
              >
                查看记录
              </el-button> -->
              <el-button type="danger" size="mini" @click="openDelete(scope.row.id)" class="option">
                删除
              </el-button>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-pagination :page-size="size" :current-page.sync="page" :total="total" @current-change="load"></el-pagination>
    <ReportDialog :visible.sync="showReport" :id="recordId"></ReportDialog>
    <!-- <RecordDetailDialog
      :id="recordId"
      :visible.sync="showDetail"
    ></RecordDetailDialog> -->
    <NDeleteDialog :visible.sync="showDelete" title="你确定要删除该实验记录？" :delMethods="deleteRecord"></NDeleteDialog>
  </el-card>
</template>
<script>
import NDeleteDialog from '../../../components/ndialog/delete/NDeleteDialog.vue'
// import RecordDetailDialog from '../../../components/dialog/RecordDetailDialog.vue'
import ReportDialog from '../../../components/dialog/ReportDialog.vue'
import RApi from '../../../api/ExpRecord.js'
export default {
  data () {
    return {
      page: 1,
      size: 15,
      total: 0,
      deleteId: 0,
      username: '',
      experimentName: '',
      experimentCode: '',
      showDelete: false,
      showReport: false,
      source: [],
      recordId: 0,
      showDetail: false
    }
  },
  components: {
    // RecordDetailDialog,
    NDeleteDialog,
    ReportDialog
  },
  methods: {
    parseSeconds (s) {
      if (s) {
        let second = s % 60
        let minit = s / 60
        return `${parseInt(minit)}:${second}`
      }
      return '0'
    },
    openDetail (id) {
      this.showDetail = true
      this.recordId = id
    },
    openReport (id) {
      this.showReport = true
      this.recordId = id
      //   window.location.href = 'http://192.168.0.156:7000/user/download/1'
    },

    loadParams () {
      return {
        experimentCode: this.experimentCode,
        experimentName: this.experimentName,
        username: this.username,
        pageNum: this.page,
        pageSize: this.size
      }
    },
    load () {
      this.axios
        .get(RApi.findByParams, {
          params: this.loadParams()
        })
        .then(res => {
          if (res.data.status === 0) {
            window.console.log(res, '实验记录')
            this.source = res.data.data.list
            this.total = res.data.data.total
          }
        })
    },
    search () {
      this.page = 1
      this.load()
    },
    reset () {
      this.experimentCode = ''
      this.experimentName = ''
      this.page = 1
      this.username = ''
      this.load()
    },
    openDelete (id) {
      this.deleteId = id
      this.showDelete = true
    },
    deleteRecord () {
      this.axios
        .delete(RApi.deleteById, { params: { id: this.deleteId } })
        .then(res => {
          if (res.data.status === 0) {
            this.load()
          }
        })
    }
  },
  mounted () {
    this.load()
  }
}
</script>
<style>
.option {
  width: 60%;
  margin-left: 10px !important;
  margin-bottom: 5px;
}
.el-table .cell {
  padding-left: 10px;
}
</style>
